<script lang="ts" setup name="Child">
    import GrandChild from './GrandChild.vue';

    // 在defineProps里没有接收的数据，全部都放在了$attrs里。
    defineProps(['a']);
</script>

<template>
    <div class="child">
        <h2>子组件</h2>
        <div>a: {{ a }}</div>
        <div>others: {{ $attrs }}</div>
        <!-- 通过下面的 v-bind="$attrs" 来实现“祖传孙”。其实可以不止跨一层，还能跨多层。 -->
        <GrandChild v-bind="$attrs"/>
    </div>
</template>

<style scoped>
    .child {
        background-color: skyblue;
        border-radius: 10px;
        padding: 5px 10px;
    }
</style>